<template>
  <div>
    <el-collapse v-model="activeNames">
      <el-collapse-item title="公共配置" name="1">
        <!--公共属性-->
        <div class="pad-lft-rgt-10">
          <div class="flex-com mar-btm">
            <span class="label-title">预设宽度</span>
            <el-input-number v-model="widget.UI.data.itemSize.width" placeholder="预设高度" size="mini"
                             class="width-100"></el-input-number>
          </div>
          <div class="flex-com mar-btm">
            <span class="label-title">预设高度</span>
            <el-input-number v-model="widget.UI.data.itemSize.height" placeholder="预设高度" size="mini"
                             class="width-100"></el-input-number>
          </div>
          <div class="flex-com mar-btm">
            <span class="label-title">文字大小</span>
            <el-input-number v-model="widget.UI.data.textSize" placeholder="文字大小" size="mini"
                             class="width-100"></el-input-number>
          </div>
          <div class="flex-com mar-btm">
            <span class="label-title">水平间隔</span>
            <el-input-number v-model="widget.UI.data.itemSpace" placeholder="水平间隔" size="mini"
                             class="width-100"></el-input-number>
          </div>
          <div class="flex-com mar-btm">
            <span class="label-title">垂直间隔</span>
            <el-input-number v-model="widget.UI.data.itemVSpace" placeholder="垂直间隔" size="mini"
                             class="width-100"></el-input-number>
          </div>
          <div class="flex-com mar-btm">
            <span class="label-title">输入名称</span>
            <el-input v-model="widget.UI.data.inputsName" placeholder="信号源名称" size="mini"
                      class="width-100"></el-input>
          </div>
          <div class="flex-com mar-btm">
            <span class="label-title">输出名称</span>
            <el-input v-model="widget.UI.data.outputsName" placeholder="显示源名称" size="mini"
                      class="width-100"></el-input>
          </div>

          <div class="flex-com mar-btm">
            <span class="label-title">左上角控制号</span>
            <el-select v-model="widget.UI.data.showTopLeftValue" placeholder="是否显示左上角控制号" size="mini" class="width-100">
              <el-option label="显示" :value="true"></el-option>
              <el-option label="隐藏" :value="false"></el-option>
            </el-select>
          </div>
          <div class="flex-com mar-btm">
            <span class="label-title">右上角控制号</span>
            <el-select v-model="widget.UI.data.showControlValue" placeholder="是否显示右上角控制号" size="mini" class="width-100">
              <el-option label="显示" :value="true"></el-option>
              <el-option label="隐藏" :value="false"></el-option>
            </el-select>
          </div>
          <div class="flex-com mar-btm" v-if="widget.UI.data.showControlValue">
            <span class="label-title">控制内容</span>
            <el-select v-model="widget.UI.data.showType" placeholder="选择名称/编号" size="mini" class="width-100">
              <el-option label="名称" value="name"></el-option>
              <el-option label="编号" value="controlValue"></el-option>
            </el-select>
          </div>
          <el-row :gutter="10" :span="12">
            <el-col :span="12">
              <div class="flex-com mar-btm">
                <span class="label-title">背景颜色</span>
                <PopoverColor :colorValue="widget.UI.data.backgroundColor">
                  <CustomColorPicker v-model="widget.UI.data.backgroundColor" show-alpha></CustomColorPicker>
                </PopoverColor>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="flex-com mar-btm">
                <span class="label-title">组件颜色</span>
                <PopoverColor :colorValue="widget.UI.data.componentColor">
                  <CustomColorPicker v-model="widget.UI.data.componentColor" show-alpha></CustomColorPicker>
                </PopoverColor>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="flex-com mar-btm">
                <span class="label-title">标题颜色</span>
                <PopoverColor :colorValue="widget.UI.data.textColor">
                  <CustomColorPicker v-model="widget.UI.data.textColor" show-alpha></CustomColorPicker>
                </PopoverColor>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="flex-com mar-btm">
                <span class="label-title">内容颜色</span>
                <PopoverColor :colorValue="widget.UI.data.contentColor">
                  <CustomColorPicker v-model="widget.UI.data.contentColor" show-alpha></CustomColorPicker>
                </PopoverColor>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="flex-com mar-btm">
                <span class="label-title">选中颜色</span>
                <PopoverColor :colorValue="widget.UI.data.activeColor">
                  <CustomColorPicker v-model="widget.UI.data.activeColor" show-alpha></CustomColorPicker>
                </PopoverColor>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="flex-com mar-btm">
                <span class="label-title">反选颜色</span>
                <PopoverColor :colorValue="widget.UI.data.textAntiColor">
                  <CustomColorPicker v-model="widget.UI.data.textAntiColor" show-alpha></CustomColorPicker>
                </PopoverColor>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-collapse-item>
      <el-collapse-item title="信号配置" name="2">
        <!--信号源属性-->
        <div class="pad-lft-rgt-10">
          <div class="inputs-item" v-for="(item, index) in  widget.UI.data.inputs" :key="index">
            <div class="flex-com mar-btm">
              <span class="label-title">输入名称</span>
              <el-input v-model="item.name" placeholder="信号源名称" size="mini"></el-input>
              <span class="el-icon-delete cursor-pointer" @click="deleteInput(index)"></span>
            </div>
            <div class="flex-com mar-btm">
              <span class="label-title">输入值</span>
              <el-input v-model="item.controlValue" placeholder="信号源值" size="mini"></el-input>
            </div>
            <div class="flex-com mar-btm">
              <span class="label-title">不支持输出通道</span>
              <el-select v-model="item.unTouchOutputs" placeholder="请选择不支持输出通道" class="width-100" multiple size="mini" collapse-tags>
                <el-option v-for="(item,index) in outputs" :label="item.controlValue" :value=item.controlValue :key="index"></el-option>

              </el-select>
            </div>
            <div class="divider"></div>
          </div>
          <div class="font-color-primary font-size-12 font-weight-bold">
            <div class="display-inline cursor-pointer" @click="addInput">
              <i class="iconfont icon-tianjia"></i><span class="mar-lft-5">添加信号源</span>
            </div>
          </div>
        </div>
      </el-collapse-item>
      <el-collapse-item title="显示配置" name="3">
        <!--显示源属性-->
        <div class="pad-lft-rgt-10">
          <div class="inputs-item" v-for="(item, index) in  widget.UI.data.outputs" :key="index">
            <div class="flex-com mar-btm">
              <span class="label-title">输出名称</span>
              <el-input v-model="item.name" placeholder="显示源名称" size="mini"></el-input>
              <span class="el-icon-delete cursor-pointer" @click="deleteOutput(index)"></span>
            </div>
            <div class="flex-com mar-btm">
              <span class="label-title">输出值</span>
              <el-input v-model="item.controlValue" placeholder="显示源值" size="mini"></el-input>
            </div>
            <div class="divider"></div>
          </div>
          <div class="font-color-primary font-size-12 font-weight-bold">
            <div class="display-inline cursor-pointer" @click="addOutput">
              <i class="iconfont icon-tianjia"></i><span class="mar-lft-5">添加显示源</span>
            </div>
          </div>
        </div>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>>
<script>
  import CustomColorPicker from '@/components/IDE/colorPicker/Color.vue';
  import {Matrix} from "@/modules/IDE/widget/custom/matrix";
  import PopoverColor from '@/components/IDE/colorPicker/Popovers.vue';

  export default {
    name: 'MatrixSpec',
    components: {
      CustomColorPicker, PopoverColor
    },
    props: {
      widget: {
        type: Matrix,
        default: () => {
          return {};
        }
      }
    },
    data() {
      return {
        activeNames: [
          '1'
        ]
      }
    },
    computed: {
      state() {
        return this.widget.getCurrentState();
      },
      outputs(){
        return this.widget.UI.data.outputs;
      },
    },
    methods: {
      addInput() {
        this.widget.UI.data.inputs.push({
          name: `信号源${this.widget.UI.data.inputs.length + 1}`,
          controlValue: (this.widget.UI.data.inputs.length + 1).toString(),
          unTouchOutputs: []
        });
      },
      addOutput() {
        this.widget.UI.data.outputs.push({
          name: `显示源${this.widget.UI.data.outputs.length + 1}`,
          controlValue: (this.widget.UI.data.outputs.length + 1).toString(),
        });
      },
      deleteInput(idx) {
        this.widget.UI.data.inputs.splice(idx, 1)
      },
      deleteOutput(idx) {
        this.widget.UI.data.outputs.splice(idx, 1)
      },
    }
  }
</script>
<style lang="less" scoped>
  .flex-com {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .label-title {
    display: inline-block;
    min-width: 56px;
    color: @colorGray10;
    font-size: 14px;
    margin-right: 5px;
  }

  .addAction {
    color: #2d69e0;
    font-size: 14px;
  }

  .divider {
    height: 2px;
    background: #eee;
    margin: 10px 0;
  }
</style>
